/* JS for tab "homepage" Visual Narrative Strategies panel & Editorial Layers */

class Homepage_Panel {

    constructor (btn_json_url, panel_title, panel_name) {
        this._btn_json_url = btn_json_url + "";
        this._panel_title = panel_title + "";
        this._btn_name_tag = btn_single_name + "";
        this._panel_name  = panel_name + "";
        this._btn_queue = [];  // save btn items
        if(this._btn_json_url.substring(this._btn_json_url.length-5) !== ".json") {
            console.error("Please check your URL format (.JSON)!");
            return ;
        }
    }

    _createPanel (extraNode_html, extraClass_arr) {
        let panel_node = document.createElement("div");
        let panel_title_html = `<h3 class="sidebar-panel-title"${this._panel_title}</h3>`;
        let panel_group_node = document.createElement("div");

        panel_node.classList.add("sidebar-panel");
        panel_node.setAttribute("id", this._panel_name.concat("-panel"));
        panel_group_node.classList.add("sidebar-panel-group");

        $.getJSON(this._btn_json_url, json => {

            json.forEach((item, i, jsonArr) => {
                let btn_node = this._createButton(item, this._panel_name, extraNode_html, extraClass_arr);
                this._appendTo_queue(btn_node); // append btn to panel queue
            });
        });

        this._btn_queue.forEach((btn_node, i, btn_queue) => panel_group_node.appendChild(btn_node));
        panel_node.innerHTML = panel_title_html;
        panel_title_html.appendChild(panel_group_node);
        return panel_node;
    }

    _createButton (json_item, panel_name, extraNode_html, extraClass_arr) {
        json_item = json_item || {};
        panel_name = panel_name || "panelName";
        extraNode = extraNode || "";
        extraClass_arr = extraClass_arr || [];

        if((typeof json_item !== "object") 
            || (typeof panel_name !== "string") 
            || (typeof btn_single_name !== "string") 
            || (typeof extraNode_html !== "string")
            || !(extraClass_arr instanceof Array)
        ) {
            console.error("Parameter(s) error! Button creation failed.");
            return document.createElement("a");
        }
        
        let btn_node = document.createElement("div");
        let btn_symbol_html = `<span class="${this._panel_name}-btn-symbol"></span>`;
        let btn_text_html = `<span class="${this._panel_name}-btn-text">${json_item[this._btn_name_tag]}</span>`;

        btn_node.classList.add("sidebar-btn", this._panel_name.concat("-btn"))
    }

    _appendTo_queue (btn_node) {
        if(!(btn_node instanceof HTMLElement)) {
            console.error("This button item is not a HTML Element!");
            return false;
        }
        this._btn_queue.push(btn_node);
    }
}

/**
 * <a href="#" class="sidebar-btn scrollSpy-btn default">
        <span class="scrollSpy-btn-symbol"></span>
        <span class="scrollSpy-btn-text">Comparison (8)</span>
        <span class="scrollSpy-btn-stop"></span>
    </a>

    <a class="sidebar-btn filter-btn active">
        <span class="filter-btn-symbol"></span>
        <span class="filter-btn-text">Elements of Visualization</span>
    </a>
 */